<template>
  <w-dialog class="f-datesheet">
    <w-buttonbar class="f-datesheet-bbr" align="between" height="52" style="padding:0 10px">
      <w-button text="取消" @click="clickCancel"></w-button>
      <w-submitbutton text="确定" @click="clickOK"></w-submitbutton>
    </w-buttonbar>
    <w-horizontal height="*">
      <w-vertical width="*" v-if="hasYear">
        <w-html class="f-datesheet-head" align="center" valign="middle">年</w-html>
        <w-slidepicker height="*" v-model="focusYear" :min-value="minYear" :max-value="maxYear" :keep-index="true"
          :data="{mode: 'year'}">
          <w-option v-for="y in yearList" :key="y" :value="y" :text="y"></w-option>
        </w-slidepicker>
      </w-vertical>
      <w-vertical width="*" v-if="hasMonth">
        <w-html class="f-datesheet-head" align="center" valign="middle">月</w-html>
        <w-slidepicker height="*" v-model="focusMonth" :min-value="minMonth" :max-value="maxMonth" :keep-index="true"
          :data="{mode: 'month'}">
          <w-option v-for="m in monthList" :key="m" :value="m" :text="dfish.strPad(m+1)"></w-option>
        </w-slidepicker>
      </w-vertical>
      <w-vertical width="*" v-if="hasDate">
        <w-html class="f-datesheet-head" align="center" valign="middle">日</w-html>
        <w-slidepicker height="*" v-model="focusDate" :min-value="minDate" :max-value="maxDate" :keep-index="true"
          :data="{mode: 'date'}">
          <w-option v-for="d in dateList" :key="d" :value="d" :text="dfish.strPad(d)"></w-option>
        </w-slidepicker>
      </w-vertical>
      <w-vertical width="*" v-if="hasHour">
        <w-html class="f-datesheet-head" align="center" valign="middle">时</w-html>
        <w-slidepicker height="*" v-model="focusHour" :min-value="minHour" :max-value="maxHour" :keep-index="true">
          <w-option v-for="h in hourList" :key="h" :value="h" :text="dfish.strPad(h)"></w-option>
        </w-slidepicker>
      </w-vertical>
      <w-vertical width="*" v-if="hasMinute">
        <w-html class="f-datesheet-head" align="center" valign="middle">分</w-html>
        <w-slidepicker height="*" v-model="focusMinute" :min-value="minMinute" :max-value="maxMinute"
          :keep-index="true">
          <w-option v-for="i in minuteList" :key="i" :value="i" :text="dfish.strPad(i)"></w-option>
        </w-slidepicker>
      </w-vertical>
      <w-vertical width="*" v-if="hasSecond">
        <w-html class="f-datesheet-head" align="center" valign="middle">秒</w-html>
        <w-slidepicker height="*" v-model="focusSecond" :min-value="minSecond" :max-value="maxSecond"
          :keep-index="true">
          <w-option v-for="s in secondList" :key="s" :value="s" :text="dfish.strPad(s)"></w-option>
        </w-slidepicker>
      </w-vertical>
      <w-vertical width="*" v-if="hasWeek">
        <w-html class="f-datesheet-head" align="center" valign="middle">周</w-html>
        <w-slidepicker height="*" v-model="focusWeek" :min-value="minWeek" :max-value="maxWeek" :keep-index="true">
          <w-option v-for="w in weekList" :key="w.value" :value="w.value" :text="w.text"></w-option>
        </w-slidepicker>
      </w-vertical>
    </w-horizontal>
  </w-dialog>
</template>

<script>
  import $ from '../dfish.js'

  export default {
    props: ['data'],
    data() {
      let f = this.data.format || 'yyyy-MM-dd'
      let d = this.data && this.data.value ? $.dateParse(this.data.value, f) : new Date
      let nd = this.data && this.data.minValue && $.dateParse(this.data.minValue, f)
      let xd = this.data && this.data.maxValue && $.dateParse(this.data.maxValue, f)
      d = $.numRange(d, nd, xd)
      let focusYear = d.getFullYear()
      let focusWeek, weekFirst, weekLast
      if (f.includes('w')) {
        focusWeek = $.dateWeek(d)[1]
        weekFirst = $.dateWeekFirst(focusYear)
        weekLast = $.dateWeekLast(focusYear)
      }
      return {
        focusYear,
        focusMonth: d.getMonth(),
        focusDate: d.getDate(),
        focusHour: d.getHours(),
        focusMinute: d.getMinutes(),
        focusSecond: d.getSeconds(),
        startYear: $.numRange(d.getFullYear() - 30, nd && nd.getFullYear()),
        endYear: $.numRange(d.getFullYear() + 30, null, xd && xd.getFullYear()),
        monthDays: new Date(d.getFullYear(), d.getMonth() + 1, 0).getDate(),
        focusWeek,
        weekFirst,
        weekLast,
        minTime: nd,
        maxTime: xd,
        format: f
      }
    },
    watch: {
      focusYear(y) {
        if (y == this.yearList[0] && y > 1030) {
          this.startYear = $.numRange(this.startYear - 30, this.minYear)
        } else if (y == this.yearList[this.yearList.length - 1]) {
          this.endYear = $.numRange(this.endYear + 30, null, this.maxYear)
        }
        this.monthDays = new Date(y, this.focusMonth + 1, 0).getDate()
        if (this.hasWeek) {
          this.weekFirst = $.dateWeekFirst(y)
          this.weekLast = $.dateWeekLast(y)
        }
      },
      focusMonth(m) {
        this.monthDays = new Date(this.focusYear, m + 1, 0).getDate()
      }
    },
    methods: {
      weekText(w) {
        
      },
      clickCancel() {
        $.close(this)
      },
      clickOK() {
        if (this.data.success) {
          let d = this.hasWeek ? $.dateParse(`${this.focusYear}-${this.focusWeek}`, 'yyyy-ww') :
            new Date(this.focusYear, this.focusMonth, this.focusDate, this.focusHour, this.focusMinute, this.focusSecond)
          this.data.success($.dateFormat(d, this.format))
        }
        $.close(this)
      },
    },
    computed: {
      dfish() {
        return $
      },
      yearList() {
        return Array.from(Array(this.endYear - this.startYear + 1)).map((v, i) => this.startYear + i)
      },
      monthList() {
        return Array.from(Array(12)).map((v, i) => i)
      },
      dateList() {
        return Array.from(Array(this.monthDays)).map((v, i) => i + 1)
      },
      hourList() {
        return Array.from(Array(24)).map((v, i) => i)
      },
      minuteList() {
        return Array.from(Array(60)).map((v, i) => i)
      },
      secondList() {
        return Array.from(Array(60)).map((v, i) => i)
      },
      weekList() {
        let d = this.weekFirst[2]
        return Array.from(Array(this.weekLast[1])).map((v, i) => {
          let startDate = d
          let endDate = $.dateAdd(d, 'd', 6)
          d = $.dateAdd(d, 'd', 7)
          return {
            value: i + 1,
            text: `${$.strPad(i + 1)} (${$.dateFormat(startDate, 'MM.dd')} - ${$.dateFormat(endDate, 'MM.dd')})`,
          }
        })
      },
      hasYear() {
        return this.format.includes('y')
      },
      hasMonth() {
        return this.format.includes('M')
      },
      hasDate() {
        return this.format.includes('d')
      },
      hasHour() {
        return this.format.includes('H')
      },
      hasMinute() {
        return this.format.includes('m')
      },
      hasSecond() {
        return this.format.includes('s')
      },
      hasWeek() {
        return this.format.includes('w')
      },
      minYear() {
        return this.minTime && this.hasYear && this.minTime.getFullYear()
      },
      maxYear() {
        return this.maxTime && this.hasYear && this.maxTime.getFullYear()
      },
      minMonth() {
        return this.minTime && (!this.hasYear || this.minYear == this.focusYear) && this.minTime.getMonth()
      },
      maxMonth() {
        return this.maxTime && (!this.hasYear || this.maxYear == this.focusYear) && this.maxTime.getMonth()
      },
      minDate() {
        return this.minTime && (!this.hasYear || this.minYear == this.focusYear) && (!this.hasMonth || this.minMonth ==
          this.focusMonth) && this.minTime.getDate()
      },
      maxDate() {
        return this.maxTime && (!this.hasYear || this.maxYear == this.focusYear) && (!this.hasMonth || this.maxMonth ==
          this.focusMonth) && this.maxTime.getDate()
      },
      minHour() {
        return this.minTime && (!this.hasYear || this.minYear == this.focusYear) && (!this.hasMonth || this.minMonth ==
            this.focusMonth) &&
          (!this.hasDate || this.minDate == this.focusDate) && this.minTime.getHours()
      },
      maxHour() {
        return this.maxTime && (!this.hasYear || this.maxYear == this.focusYear) && (!this.hasMonth || this.maxMonth ==
            this.focusMonth) &&
          (!this.hasDate || this.maxDate == this.focusDate) && this.maxTime.getHours()
      },
      minMinute() {
        return this.minTime && (!this.hasYear || this.minYear == this.focusYear) && (!this.hasMonth || this.minMonth ==
            this.focusMonth) &&
          (!this.hasDate || this.minDate == this.focusDate) && (!this.hasHour || this.minHour == this.focusHour) && this
          .minTime.getMinutes()
      },
      maxMinute() {
        return this.maxTime && (!this.hasYear || this.maxYear == this.focusYear) && (!this.hasMonth || this.maxMonth ==
            this.focusMonth) &&
          (!this.hasDate || this.maxDate == this.focusDate) && (!this.hasHour || this.maxHour == this.focusHour) && this
          .maxTime.getMinutes()
      },
      minSecond() {
        return this.minTime && (!this.hasYear || this.minYear == this.focusYear) && (!this.hasMonth || this.minMonth ==
            this.focusMonth) &&
          (!this.hasDate || this.minDate == this.focusDate) && (!this.hasHour || this.minHour == this.focusHour) && (!
            this.hasMinute || this.minMinute == this.focusMinute) && this.minTime.getSeconds()
      },
      maxSecond() {
        return this.maxTime && (!this.hasYear || this.maxYear == this.focusYear) && (!this.hasMonth || this.maxMonth ==
            this.focusMonth) &&
          (!this.hasDate || this.maxDate == this.focusDate) && (!this.hasHour || this.maxHour == this.focusHour) && (!
            this.hasMinute || this.maxMinute == this.focusMinute) && this.maxTime.getSeconds()
      },
      minWeek() {

      },
      maxWeek() {

      },
    }
  }
</script>

<style>
  .f-datesheet {
    background: #f9f9f9;
  }

  .f-datesheet-ok {
    color: var(--w--focus-color);
  }

  .f-datesheet-head {
    height: 36px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
  }
</style>
